import styles from './index.module.less'

interface ListItem {
    id: number
    photo: string
    realname: string
    organization: string
    teacher_type_name: string[]
    teacher_label_name: string[]
}

interface ListType {
    list?: ListItem[]
}

const ExcellentLecturer = ({ list }: ListType) => {
    return (
        <div className={styles.ExcellentLecturer}>
            {list?.map((item: ListItem) => {
                return (
                    <div className={styles.item} key={item.id}>
                        <div className={styles.item__info}>
                            <img src={item.photo || 'http://img.busionline.com/avatar.png'} />
                            <div>
                                <p className={styles.item__info_name}>{item.realname}</p>
                                <p className={styles.item__info_region}>{item.organization}</p>
                            </div>
                        </div>

                        <div className={styles.item__tag}>
                            <p>{item.teacher_type_name[0]}</p>
                            <p>
                                {item.teacher_label_name.map((items: string, indexs: number) => {
                                    return <span key={indexs}>{items}</span>
                                })}
                            </p>
                        </div>
                    </div>
                )
            })}
        </div>
    )
}

export default ExcellentLecturer
